import { useState, useRef, useImperativeHandle, forwardRef } from 'react'
import { Layout, Modal } from 'antd'
import ImageAside from '@/components/Image/ImageAside'
import ImageMain from '@/components/Image/imageMain'
const { Sider, Content } = Layout
interface propsData {
  ref: any
  getImgUrl: (url: string) => void
}
function ChooseImage(props: propsData, ref: React.Ref<any>) {
  useImperativeHandle(ref, () => {
    return { showModal }
  })
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [selectClass, setSelectClass] = useState(168)
  const ImageAsideRef = useRef<any>(null)
  const ImageMainRef = useRef<any>(null)
  const clickClass = (id: number) => {
    setSelectClass(id)
  }
  const showModal = () => {
    setIsModalOpen(true)
  }

  const handleOk = () => {
    console.log(checkedUrl)
    props.getImgUrl(checkedUrl)
    setIsModalOpen(false)
  }

  const handleCancel = () => {
    setIsModalOpen(false)
  }
  const [checkedUrl, setCheckedUrl] = useState('')
  const chooseUrl = (data: any) => {
    setCheckedUrl(data.url)
  }
  return (
    <>
      <Modal title='选择图片' width='70%' open={isModalOpen} onOk={handleOk} onCancel={handleCancel} zIndex={9999}>
        <Layout>
          <Sider style={{ background: '#ffffff' }}>
            <ImageAside ref={ImageAsideRef} setClassPage={clickClass} />
          </Sider>
          <Layout>
            <Content style={{ background: '#ffffff' }}>
              <ImageMain ref={ImageMainRef} selectClass={selectClass} chooseUrl={chooseUrl} checkBox />
            </Content>
          </Layout>
        </Layout>
      </Modal>
    </>
  )
}
export default forwardRef(ChooseImage)
